<template>
  <div class="companyPosition">
    <div class="main">
      <!-- 头部箭头 -->
      <van-nav-bar
        class="navTitle"
        title="在招职位"
        @click-left="$router.go(-1)"
      >
        <template #left><i class="iconfont iconbtn_nav_back"></i> </template
      ></van-nav-bar>
      <!-- tab固定 -->
      <div class="tabList">
        <van-tabs class="van_tag_box" v-model="active" sticky :offset-top="30">
          <van-tab v-for="(item, index) in screenDate.types" :key="index">
            <template #title>
              <span @click="Event(item)" :class="{ spansty: active === index }">
                {{ item }}
              </span>
            </template>
          </van-tab>
        </van-tabs>
      </div>

      <van-dropdown-menu class="menu">
        <van-dropdown-item
          v-model="value"
          :options="cityList"
          @change="onChange(value)"
          @open="openCity('city')"
        >
          <template #title>城市</template>
        </van-dropdown-item>
        <van-dropdown-item
          @change="onChange(value)"
          v-model="value"
          :options="experienceList"
          @open="openCity('type')"
        >
          <template #title>岗位</template>
        </van-dropdown-item>
        <van-dropdown-item
          :options="List"
          @open="openCity('salary')"
          @change="onChange(value)"
          v-model="value"
        >
          <template #title>难度</template>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-button type="primary" class="startBtn" @click="dati"
        >开始答题</van-button
      >
    </div>
  </div>
</template>

<script>
import { positionFilters, companyPositions } from '@/api/api.js'

export default {
  data () {
    return {
      loading: false,
      finished: false,
      isShow: false,
      screenDate: [],
      value: 0,
      cityList: [],
      salaryList: [],
      experienceList: [],
      showList: [],
      limit: 200,
      start: 0,
      city: null,
      experience: null,
      salary: null,
      type: null,
      active: '',
      c: '',
      List: [
        {
          text: '不限',
          value: 0
        },
        {
          text: '简单',
          value: 1
        },
        {
          text: '普通',
          value: 2
        },
        {
          text: '困难',
          value: 3
        }
      ]
    }
  },
  methods: {
    openCity (c) {
      console.log(c)
      this.c = c
    },
    // 点击选项导致value值改变时触发
    async onChange (value) {
      if (this.c === 'city') {
        console.log(this.cityList)
        this.cityList.forEach(item => {
          if (item.value === value) {
            this.city = item.text
            if (item.value === 0) {
              this.city = null
            }
          }
        })
        console.log(this.city)
        this.showList = []
      } else if (this.c === 'salary') {
        this.salaryList.forEach(item => {
          if (item.value === value) {
            this.salary = item.text
            if (item.value === 0) {
              this.salary = null
            }
          }
        })

        console.log(this.salary)
        this.showList = []
      } else if (this.c === 'type') {
        this.experienceList.forEach(item => {
          if (item.value === value) {
            this.experience = item.text
            if (item.value === 0) {
              this.experience = null
            }
          }
        })
        console.log(this.experience)
        this.showList = []
      }
      // 调用接口发送请求
      const res = await companyPositions({
        id: this.$route.params.id,
        limit: this.limit,
        start: this.start,
        city: this.city,
        experience: this.experience,
        salary: this.salary,
        type: this.type
      })
      console.log(res)
      this.showList = res.data.data.list
    },
    onLoad () {
      this.Event()
    },
    // 打开弹出框
    async Event (item) {
      // console.log(item)
      if (item === '全部') {
        // 调用接口发送请求
        this.type = null
        const res = await companyPositions({
          id: this.$route.params.id,
          limit: this.limit,
          start: this.start,
          city: this.city,
          experience: this.experience,
          salary: this.salary
        })
        this.showList = res.data.data.list
        this.finished = true
        console.log('全部职位', this.showList)
        return
      }
      this.showList = []
      this.type = item
      // 调用接口发送请求
      const res = await companyPositions({
        id: this.$route.params.id,
        limit: this.limit,
        start: this.start,
        type: this.type,
        city: this.city,
        experience: this.experience,
        salary: this.salary
      })
      this.showList = res.data.data.list

      console.log('职位', this.showList)
    },
    // 得到筛选数据
    async getScreendate () {
      const res = await positionFilters(this.$route.params.id)
      this.screenDate = res.data.data
      console.log('我是大大大ad', this.screenDate)
      this.screenDate.types.unshift('全部')
      this.cityList = res.data.data.cityFilters
      this.cityList.unshift('全部')
      this.cityList = this.cityList.map((item, index) => {
        return {
          text: item,
          value: index
        }
      })
      console.log('城市', this.cityList)
      this.salaryList = res.data.data.salaryFilters
      this.salaryList.unshift('全部')
      this.salaryList = this.salaryList.map((item, index) => {
        return {
          text: item,
          value: index
        }
      })
      this.experienceList = res.data.data.types
      this.experienceList.unshift('全部')
      this.experienceList = this.experienceList.map((item, index) => {
        return {
          text: item,
          value: index
        }
      })
    },
    dati () {
      this.$toast('敬请期待')
    }
  },
  created () {
    console.log(this.$route.params.id)
    this.$nextTick(() => {
      this.getScreendate()
      this.Event('全部')
    })
  }
}
</script>

<style lang="less" scoped>
.companyPosition {
  width: 100%;
  font-size: 16px;
  padding-top: 140px;
  box-sizing: border-box;
  position: relative;
  .main {
    .navTitle {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: #fff;
      z-index: 9999;
      i {
        margin-left: 20px;
        // margin-top: 30px;
        font-size: 28px;
        color: #000;
      }
    }
    /deep/.van-nav-bar__left {
      padding: 0;
    }
    .tabList {
      // margin-top: 20px;
      .tab {
        margin-left: 10px;
      }

      .van_tag_box {
        position: fixed;
        top: 50px;
        left: 0;
        width: 100%;
        z-index: 9999;
        /deep/ .van-tab__text {
          width: 54px;
          height: 28px;
          background-color: #f7f4f5;
          border-radius: 14px;
          text-align: center;
          line-height: 28px;
        }

        .spansty {
          display: inline-block;
          width: 100%;
          height: 100%;
          border-radius: 14px;
          background-color: rgb(0, 184, 212);
          color: #fff;
        }
        /deep/.van-tabs__line {
          display: none;
        }
      }
    }
    .menu {
      width: 100%;
      position: fixed;
      top: 90px;
      left: 0;
      .item {
        width: 100%;
        height: 50px;
        line-height: 50px;
        margin-left: 20px;
      }
    }
    .startBtn {
      position: absolute;
      bottom: -500px;
      right: 20px;
    }
  }
}
</style>
